<template>
  <div class="student-edit">
    <div class="title">
      <div class="block"></div>
      <div class="word">编辑学生信息</div>
      <div class="button">
        <el-button class="el-button" @click="refresh">刷新</el-button>
      </div>
    </div>
    <div class="student-edit-content">
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="姓名:">
          <el-input v-model="form.nickname"></el-input>
        </el-form-item>

        <el-form-item label="头像上传:">
          <el-upload
            class="avatar-uploader"
            action="#"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :http-request="selectPicUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <!-- <input type="file" :change="ruleForm.imageUrl"> -->
        </el-form-item>

        <el-form-item label="来源:">
          <el-checkbox-group v-model="form.userSource">
            <el-checkbox label="知乎" name="userSource"></el-checkbox>
            <el-checkbox label="微博" name="userSource"></el-checkbox>
            <el-checkbox label="朋友介绍" name="userSource"></el-checkbox>
            <el-checkbox label="其他" name="userSource"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="是否需要顾问联系:" class="iscontact">
          <el-radio label="true" v-model="form.consultantContact"
            >需要</el-radio
          >
          <el-radio label="false" v-model="form.consultantContact"
            >不需要</el-radio
          >
        </el-form-item>

        <el-form-item label="手机号码:">
          <el-input v-model="form.phone"></el-input>
        </el-form-item>

        <el-form-item label="微信号:">
          <el-input v-model="form.wechat"></el-input>
        </el-form-item>
        <el-form-item label="邮箱:">
          <el-input v-model="form.email"></el-input>
        </el-form-item>
        <el-form-item label="新密码:">
          <el-input type="password" v-model="form.newPassword"></el-input>
        </el-form-item>
        <el-form-item label="确认密码:">
          <el-input type="password" v-model="form.confirmPassword"></el-input>
        </el-form-item>

        <el-form-item label="免费查学校:">
          <el-switch
            v-model="form.freeCheck"
            active-color="#1abc9c"
          ></el-switch>
        </el-form-item>
        <el-form-item label="账号启用状态:">
          <el-switch v-model="form.status" active-color="#1abc9c"></el-switch>
        </el-form-item>
        <el-form-item label="备注:">
          <el-input type="textarea" v-model="form.description"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="onSubmit">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import {
  getStudentDetail,
  updateStudentDetail,
  updateStudentPhotoDetail,
} from "../../../api";
import qs from "qs";

export default {
  inject: ["reload"],
  name: "studentEdit",
  components: {},
  data() {
    return {
      formData: new FormData(),
      imageUrl: "",
      userId: 0,
      form: {
        phone: "",
        nickname: "",
        freeCheck: false,
        status: false,
        userSource: [],
        consultantContact: "",
        description: "",
        wechat: "",
        email: "",
        newPassword: "",
        confirmPassword: "",
      },
    };
  },

  mounted() {
    this.$emit("routeName", "studentEdit");

    if (this.$route.params.userId) {
      this.userId = this.$route.params.userId;
      getStudentDetail(this.userId).then((res) => {
        console.log(res.data);
        const data = res.data;
        this.form.phone = data.phone;
        this.form.nickname = data.nickname;
        this.form.wechat = data.wechat;
        this.form.email = data.email;
        this.form.freeCheck = !data.freeCheck;
        this.form.status = !data.disabled;
        this.form.consultantContact = data.consultantContact.toString();
        this.form.userSource = data.userSource.split(",");
        this.imageUrl = data.avatar;
      });
    }
  },

  methods: {
    selectPicUpload(file) {
      this.imageUrl = URL.createObjectURL(file.file);
      this.formData.append("avatar", file.file);
    },
    onSubmit() {
      let data = qs.stringify(
        {
          aaa: "",
          consultantContact: this.form.consultantContact,
          disabled: !this.form.status,
          description: this.form.description,
          email: this.form.email,
          freeCheck: !this.form.freeCheck,
          password: this.form.confirmPassword,
          phone: this.form.phone,
          userSource: this.form.userSource,
          wechat: this.form.wechat,
          nickname: this.form.nickname,
          bbb: "",
        },
        { arrayFormat: "brackets" }
      );
      updateStudentDetail(this.userId, data).then((res) => {
        console.log(res);
        if (res.code === 200) {
          this.$message({
            message: "更新学生信息成功",
            type: "success",
          });
        } else {
          this.$message.error("更新用户信息失败");
        }
      });

      updateStudentPhotoDetail(this.userId, this.formData).then((res) => {
        console.log(res);
      });
    },
    handleAvatarSuccess(res, file) {},
    refresh() {
      this.reload();
    },
  },
};
</script>

<style scoped>
.title {
  position: relative;
  display: flex;
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #e4e4e4;
  line-height: 50px;
  background-color: #f3f3f3;
}
.block {
  width: 5px;
  height: 30px;
  margin-top: 10px;
  margin-left: 5px;
  background-color: #1abc9c;
}
/* 标题文字 */
.word {
  width: 100px;
  margin-left: 5px;
  color: #999999;
}
.button {
  position: absolute;
  right: 30px;
}

.student-edit-content {
  background-color: #fff;
  width: 80%;
  margin-left: 10%;
  padding-top: 50px;
}

.el-form {
  width: 400px;
  margin-left: 50%;
  transform: translateX(-70%);
}

.el-button {
  background-color: #1abc9c;
  color: #fff;
  width: 100px;
  margin-bottom: 50px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

::v-deep .iscontact .el-form-item__label {
  width: 150px !important;
}
</style>
